<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-12-18 15:55:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-04 10:59:09
 * @FilePath: CardList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 卡片列表 -->
    <div>
        <div class="cardList" @click="showCardData(1, '今日总通话汇总')">
            <div>今日总通话次数</div>
            <div>{{ cardInfo.totalCount }}</div>
        </div>
        <div class="cardList" @click="showCardData(2, '今日有效话单汇总')">
            <div>今日有效话单次数</div>
            <div>{{ cardInfo.successTotalCount }}</div>
        </div>
        <div class="cardList" @click="showCardData(3, '今日短话单汇总')">
            <div>今日短话单次数</div>
            <div>{{ cardInfo.shortSuccessCount }}</div>
        </div>
        <div class="cardList" @click="showCardData(4, '今日无效通话汇总')">
            <div>今日无效通话次数</div>
            <div>{{ cardInfo.failTotalCount }}</div>
        </div>
        <!-- <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"> -->
        <Dialog :title="dialogFormTitle" v-if="dialogFormVisible" @CloseDialog="CloseDialog" ref="dialogRef"
            :height="684">
            <div class="loading-flex-box" v-show="Loading">
                <dv-loading>加载中...</dv-loading>
            </div>
            <div class="chartStaty" ref="chartStatyRef">
                <div class="topFlex">
                    <div>
                        {{ `${selectType == 1 ? '总通话' : selectType == 2 ? '有效话单' : selectType == 3 ? '短话单' : '无效通话'}`
                        }}汇总统计
                        <el-tooltip class="item" effect="light" content="Top Left 提示文字" placement="top-start">
                            <div slot="content">
                                <p> 说明：</p>
                                <p> 1、近一周通话，不包括统计当天的7天；</p>
                                <p> 2、近一月通话，不包括统计当天的30天；</p>
                                <p> 3、统计日期是当天，统计结束时间点设为A，A=当前的时分秒，当天通话统计取当天凌晨到当天的A时间；
                                    前一天统计取前一天凌晨到前一天的A时间；</p>
                                <p> 4、统计时间是非当天，当天通话统计取当天整天，前一天统计取前一天整天。</p>
                            </div>
                            <img :src="require('../assets/img/icon_tips.png')" />
                        </el-tooltip>
                    </div>
                    <div class="row align-items">
                        <span>选择日期</span>
                        <el-date-picker size="small" style="width:240px" v-model="datevalue" @change="changeDate"
                            :clearable="false" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                        <el-button class="btnBox" @click="MouthSecondDialog = true">近一月通话分钟统计</el-button>
                    </div>
                </div>
                <div class="botFlex">
                    <div id="chartNoe"></div>
                    <div class="flexList">
                        <div class="itemFlex">
                            <div class="item">
                                <div>昨日同时段通话次数</div>
                                <div>{{ `${selectType == 1 ? callTotalDay.preDayCall.callCount : selectType == 2 ?
            callTotalDay.preDayCall.successCount
            :
            selectType == 3 ?
                callTotalDay.preDayCall.shortSuccessCount : callTotalDay.preDayCall.failCount}`
                                    }}</div>
                            </div>
                             <div class="item">
                                <div>昨日整天通话次数</div>
                                <div>{{ `${selectType == 1 ? callTotalDay.preDayTotalCall.callCount : selectType == 2 ?
            callTotalDay.preDayTotalCall.successCount
            :
            selectType == 3 ?
                callTotalDay.preDayTotalCall.shortSuccessCount : callTotalDay.preDayTotalCall.failCount}`
                                    }}</div>
                            </div>
                            <div class="item">
                                <div>近一周通话次数</div>
                                <div>{{ `${selectType == 1 ? callTotalDay.weekCall.callCount : selectType == 2 ?
            callTotalDay.weekCall.successCount
            :
            selectType == 3 ?
                callTotalDay.weekCall.shortSuccessCount : callTotalDay.weekCall.failCount}`
                                    }}</div>
                            </div>
                            <div class="item">
                                <div>近一月通话次数</div>
                                <div>{{ `${selectType == 1 ? callTotalDay.monthCall.callCount : selectType == 2 ?
            callTotalDay.monthCall.successCount
            :
            selectType == 3 ?
                callTotalDay.monthCall.shortSuccessCount : callTotalDay.monthCall.failCount}`
                                    }}</div>
                            </div>
                            <div class="item">
                                <div>{{ datevalue }}（通话次数）</div>
                                <div>
                                    <span>{{ `${selectType == 1 ? callTotalDay.theDayCall.callCount : selectType == 2 ?
            callTotalDay.theDayCall.successCount
            :
            selectType == 3 ?
                callTotalDay.theDayCall.shortSuccessCount : callTotalDay.theDayCall.failCount}`
                                        }}</span>
                                    <img v-show="percentageRate"
                                        :src="percentageRate && percentageRate.includes('+') ? require('../assets/img/up.png') : require('../assets/img/down.png')" />
                                    <span v-show="percentageRate"
                                        :style="'color:' + (percentageRate && percentageRate.includes('+') ? '#1EF8AD' : '#FB1E1D') + ';'">较昨日{{
            percentageRate }}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="itemFlex" v-if="selectType != 4">
                            <div class="item">
                                <div>昨日同时段通话分钟数</div>
                                <div>{{ `${selectType == 1 ?
            Math.ceil(Number(callTotalDay.preDayCall.callSecond) / 60) :
            selectType == 2 ?
                Math.ceil(Number(callTotalDay.preDayCall.normalCallSecond) / 60)
                :
                selectType == 3 ?
                    Math.ceil(Number(callTotalDay.preDayCall.shortCallSecond) / 60) :
                    '0'}`
                                    }}</div>
                            </div>
                             <div class="item">
                                <div>昨日整天通话分钟数</div>
                                <div>{{ `${selectType == 1 ?
            Math.ceil(Number(callTotalDay.preDayTotalCall.callSecond) / 60) :
            selectType == 2 ?
                Math.ceil(Number(callTotalDay.preDayTotalCall.normalCallSecond) / 60)
                :
                selectType == 3 ?
                    Math.ceil(Number(callTotalDay.preDayTotalCall.shortCallSecond) / 60) :
                    '0'}`
                                    }}</div>
                            </div>
                            <div class="item">
                                <div>近一周通话分钟数</div>
                                <div>{{ `${selectType == 1 ?
            Math.ceil(Number(callTotalDay.weekCall.callSecond) / 60) :
            selectType == 2 ?
                Math.ceil(Number(callTotalDay.weekCall.normalCallSecond) / 60)
                :
                selectType == 3 ?
                    Math.ceil(Number(callTotalDay.weekCall.shortCallSecond) / 60) :
                    '0'}`
                                    }}</div>
                            </div>
                            <div class="item">
                                <div>近一月通话分钟数</div>
                                <div>{{ `${selectType == 1 ?
            Math.ceil(Number(callTotalDay.monthCall.callSecond) / 60) :
            selectType == 2 ?
                Math.ceil(Number(callTotalDay.monthCall.normalCallSecond) / 60)
                :
                selectType == 3 ?
                    Math.ceil(Number(callTotalDay.monthCall.shortCallSecond) / 60) :
                    '0'}`
                                    }}</div>
                            </div>
                            <div class="item">
                                <div>{{ datevalue }}（通话分钟数）</div>
                                <div>{{ `${selectType == 1 ?
            Math.ceil(Number(callTotalDay.theDayCall.callSecond) / 60) :
            selectType == 2 ?
                Math.ceil(Number(callTotalDay.theDayCall.normalCallSecond) / 60)
                :
                selectType == 3 ?
                    Math.ceil(Number(callTotalDay.theDayCall.shortCallSecond) / 60) :
                    '0'}`
                                    }}
                                    <img v-show="minnisPercentageRate"
                                        :src="minnisPercentageRate && minnisPercentageRate.includes('+') ? require('../assets/img/up.png') : require('../assets/img/down.png')" />
                                    <span v-show="minnisPercentageRate"
                                        :style="'color:' + (minnisPercentageRate && minnisPercentageRate.includes('+') ? '#1EF8AD' : '#FB1E1D') + ';'">较昨日{{
                                        minnisPercentageRate }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tableBox" style="width: 100%;" v-if="tableData.length > 0">
                <el-table :data="filteredItems(tableData)" size="medium" style="width: 100%;background: transparent;"
                    :max-height="tableHeight" :header-cell-style="headerCellstyle" stripe class="elTable"
                    :border="false">
                    <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
                    <el-table-column prop="schoolName" show-overflow-tooltip label="学校名称" width="170" align="center">
                    </el-table-column>
                    <el-table-column prop="qqdhStudentCount" sortable show-overflow-tooltip label="办理人数" width=""
                        align="center">
                    </el-table-column>
                    <el-table-column prop="deviceCount" sortable show-overflow-tooltip label="设备数量" width=""
                        align="center">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip width="130" sortable prop="count"
                        :label="`${selectType == 1 ? '总通话/次' : selectType == 2 ? '有效通话/次' : selectType == 3 ? '短话单/次' : '无效通话/次'}`"
                        align="center">
                        <!-- <template v-slot="scope">
                            <span>{{ selectType == 1 ? scope.row.callCount : selectType == 2 ?
            scope.row.successCount : selectType == 3
                ? scope.row.shortSuccessCount : scope.row.failCount
                                }}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column sortable show-overflow-tooltip width="130" prop="phoneNum" :label="`${selectType == 1 ? '平均通话/分钟' : selectType == 2 ? '平均有效通话/分钟' : selectType == 3 ?
            '平均短话/分钟' : '平均无效通话/分钟'}`" align="center">
                        <!-- <el-table-column show-overflow-tooltip width="130" label="平均通话次数" align="center"> -->
                        <!-- <template v-slot="scope">
                            <span v-if="selectType == 1">
                                {{ fiterDate(scope.row.callCount, scope.row.qqdhStudentCount, 2) }}
                            </span>
                            <span v-if="selectType == 2">
                                {{ fiterDate(scope.row.successCount, scope.row.qqdhStudentCount, 2) }}
                            </span>
                            <span v-if="selectType == 3">
                                {{ fiterDate(scope.row.shortSuccessCount, scope.row.qqdhStudentCount, 2) }}
                            </span>
                            <span v-if="selectType == 4">
                                {{ fiterDate(scope.row.failCount, scope.row.qqdhStudentCount, 2) }}
                            </span>
                        </template> -->
                    </el-table-column>
                    <el-table-column sortable show-overflow-tooltip width="150" prop="deviceNum"
                        :label="`${selectType == 1 ? '设备平均通话/次' : selectType == 2 ? '设备平均有效通话/次' : selectType == 3 ? '设备平均短话单/次' : '设备平均无效通话/次'}`"
                        align="center">
                        <!-- <template v-slot="scope">
                            <span v-if="selectType == 1">
                                {{ fiterDate(scope.row.callCount, scope.row.deviceCount, 2) }}
                            </span>
                            <span v-if="selectType == 2">
                                {{ fiterDate(scope.row.successCount, scope.row.deviceCount, 2) }}
                            </span>
                            <span v-if="selectType == 3">
                                {{ fiterDate(scope.row.shortSuccessCount, scope.row.deviceCount, 2) }}
                            </span>
                            <span v-if="selectType == 4">
                                {{ fiterDate(scope.row.failCount, scope.row.deviceCount, 2) }}
                            </span>
                        </template> -->
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                        <template v-slot="scope">
                            <el-button size="mini" type="text" @click="handleEdit(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                    <template slot="empty" v-if="isNodata">
                        <NoDate title="暂无数据"></NoDate>
                    </template>
                </el-table>
            </div>
            <div class="noDate" v-if="tableData.length == 0">
                <img :src="require('../assets/img/ikon_no date.png')" alt="">
                <div>暂无数据</div>
            </div>
        </Dialog>
        <!-- </transition> -->
        <!-- 查看详情弹窗 -->
        <Drawer ref="drawerRef" :drawer="drawerVisible" :Title="dialogFormTitle" @handleClose="handleClose"
            :detailInfo="detailInfo" :selectType="selectType" :schoolCallTotalDay="schoolCallTotalDay"
            :datevalue="datevalue" :schoolRate="schoolRate" :schoolPercentageRate="schoolPercentageRate"
            :drawerLoadding="drawerLoadding">
        </Drawer>
        <!-- 近一月通话分钟统计 -->
        <Dialog v-if="MouthSecondDialog" width="80%" @CloseDialog="CloseDialog2" title="近一月通话分钟统计">
            <MouthSecondBar :MouthSecondDialog="MouthSecondDialog" :schoolList="schoolList" :selectType="selectType"
                :datevalue="datevalue">
            </MouthSecondBar>
        </Dialog>
    </div>
</template>
<script>
import MouthSecondBar from './MouthSecondBar.vue'
export default {
    name: 'CardList',
    components: {
        MouthSecondBar
    },
    props: {
        // 床位集合
        label: {
            type: String,
            default: ''
        },
        span: {
            type: Number,
            default: 8
        },
        schoolList: {
            type: Array,
            default: []
        },
    },
    watch: {
        dialogFormVisible: {
            handler(newVal) {
                if (this.dialogFormVisible) {
                    setTimeout(() => {
                        this.getTableHeight()
                    }, 0);
                }
            }
        },
    },
    data() {
        return {
            datevalue: '',// 选择日期
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            chartRef: null,
            dialogFormVisible: false,
            drawerVisible: false,
            MouthSecondDialog: false,
            dialogFormTitle: '',
            tableData: [],
            tableHeight: 0,
            cardInfo: {},
            selectType: 1,
            // 查看详情数据
            detailInfo: {
                infodel: {},
                deviceInfo: []
            },
            Loading: false,
            isNodata: false,
            callTotalDay: {
                monthCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                    callSecond: '0',
                    normalCallSecond: '0',
                    shortCallSecond: '0',
                },
                // 昨天同时段的数据
                preDayCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                    callSecond: '0',
                    normalCallSecond: '0',
                    shortCallSecond: '0',
                },
                // 昨天一整天
                preDayTotalCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                    callSecond: '0',
                    normalCallSecond: '0',
                    shortCallSecond: '0',
                },
                weekCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                    callSecond: '0',
                    normalCallSecond: '0',
                    shortCallSecond: '0',
                },
                theDayCall: {
                    callCount: '0',
                    callSecond: '0',
                    failCount: '0',
                    normalCallSecond: '0',
                    shortCallSecond: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                },
            },
            percentageRate: '',
            minnisPercentageRate: '',
            // 某个学校某天的汇总统计数据
            schoolCallTotalDay: {
                monthCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                },
                preDayCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                },
                weekCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                },
                theDayCall: {
                    callCount: '0',
                    failCount: '0',
                    shortSuccessCount: '0',
                    successCount: '0',
                }
            },
            drawerLoadding: false,
            // 某个学校的某个时间的百分比
            schoolRate: 0,
            // 某个学校的某个时间的今天和昨天的差值
            schoolPercentageRate: '0',
        }
    },
    async mounted() {
        this.datevalue = this.$util.getNowDate()
        await this.getInfo()
        window.addEventListener('resize', () => {
            setTimeout(async () => {
                if (this.dialogFormVisible) {
                    await this.getChart(this.filterRetePersent(this.callTotalDay).rate)
                    await this.getTableHeight()
                }
            }, 0)
        })
    },
    methods: {
        fiterDate2(data1, data2, num) {
            if (Number(data2) === 0) {
                return '0.00'
            } else {
                return (Number(data1) /
                    Number(data2)).toFixed(num)
            }
        },
        // 转换成分钟数
        fiterDate3(data1, data2, num) {
            if (Number(data2) === 0) {
                return '0.00'
            } else {
                return ((Number(data1) / 60) /
                    Number(data2)).toFixed(num)
            }
        },
        async getInfo() {
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/phoneCallToday')
            this.cardInfo = res
        },
        // 计算表格的高度
        getTableHeight() {
            this.tableHeight = this.$refs.dialogRef.$el.children[0].children[1].clientHeight - this.$refs.chartStatyRef.clientHeight - this.$util.nowSizeWidth(70)
        },
        // 单元格表头的设置
        headerCellstyle({ row, column, rowIndex, columnIndex }) {
            return 'background:#082667!important;color: #FFFFFF;font-size: 12px;'
        },
        async showCardData(type, str) {
            this.isNodata = false
            this.dialogFormVisible = true
            this.Loading = true
            this.selectType = type
            await this.getCallTotalDay()
            this.dialogFormTitle = str
            const params = {
                theDay: this.datevalue
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/querySchoolPhoneCallAllDay', { params: params })
            this.tableData = res.data
            this.tableData.forEach(item => {
                item.qqdhStudentCount = Number(item.qqdhStudentCount)
                item.deviceCount = Number(item.deviceCount)
                item.callCount = Number(item.callCount)
                item.successCount = Number(item.successCount)
                item.shortSuccessCount = Number(item.shortSuccessCount)
                item.failCount = Number(item.failCount)
                item.count = this.selectType == 1 ? item.callCount : this.selectType == 2 ?
                    item.successCount : this.selectType == 3
                        ? item.shortSuccessCount : item.failCount
                item.deviceNum = this.selectType == 1 ? this.fiterDate2(item.callCount, item.deviceCount, 2) : this.selectType == 2 ?
                    this.fiterDate2(item.successCount, item.deviceCount, 2) : this.selectType == 3
                        ? this.fiterDate2(item.shortSuccessCount, item.deviceCount, 2) : this.fiterDate2(item.failCount, item.deviceCount, 2)
                item.deviceNum = Number(item.deviceNum)

                item.phoneNum = this.selectType == 1 ? this.fiterDate3(item.callSecond, item.callCount, 2) : this.selectType == 2 ?
                    this.fiterDate3(item.longSuccessCallSecond, item.successCount, 2) : this.selectType == 3
                        ? this.fiterDate3(item.shortSuccessCallSecond, item.shortSuccessCount, 2) : this.fiterDate3(0, item.failCount, 2)
                item.phoneNum = Number(item.phoneNum)
            });
            this.$forceUpdate()
            this.isNodata = res.data.length > 0 ? false : true
            this.Loading = false
        },
        // 切换时间的时候
        async changeDate() {
            this.showCardData(this.selectType, this.dialogFormTitle)
        },
        // 今天跟昨日比较增长/下降了多少
        percentage(theDayCalldata, preDayCalldata) {
            if (Number(theDayCalldata) === 0) {
                // 如果今天的数值为0 
                return '+0.00'
            } else if (Number(preDayCalldata) === 0) {
                return '+100.00'
            } else if (Number(theDayCalldata) !== Number(preDayCalldata)) {
                const change = Number(theDayCalldata) - Number(preDayCalldata)
                const absoluteChange = Math.abs(change);
                const base = Math.abs(preDayCalldata);
                const percentage = (absoluteChange / base) * 100
                return change > 0 ? '+' + percentage.toFixed(2) : '-' + percentage.toFixed(2)
            }
            return '+0.00';
        },
        // 获取所有学校某天通话统计
        async getCallTotalDay() {
            const params = {
                theDay: this.datevalue
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/phoneCallTotalDayNew', { params: params })

            if (this.datevalue === this.$util.getNowDate()) {
                // 如果选择的是当天
                this.callTotalDay.monthCall = res.data.todayMonthCall  // 近一个月的数据
                this.callTotalDay.preDayCall = res.data.yestodayThisTimeCall  // 昨天同时段的数据
                this.callTotalDay.preDayTotalCall= res.data.yestodayTotalCall  // 昨天一整天的数据
                this.callTotalDay.weekCall = res.data.todayWeekCall  // 近一周的数据
                this.callTotalDay.theDayCall= res.data.todayThisTimeCall  // 当天当前时段的数据
            } else {
                // 如果不是当天
                this.callTotalDay.monthCall = res.data.selectDayMonthCall  // 近一个月的数据
                this.callTotalDay.preDayCall = res.data.selectDayPreDayThisTimeCall  // 昨天同时段的数据
                this.callTotalDay.preDayTotalCall= res.data.selectDayPreDayTotalCall  // 昨天一整天的数据
                this.callTotalDay.weekCall = res.data.selectDayWeekCall  // 近一周的数据
                this.callTotalDay.theDayCall= res.data.selectDayThisTimeCall  // 当天当前时段的数据
            }
            this.percentageRate = this.filterRetePersent(this.callTotalDay).percentageRate
            this.minnisPercentageRate = this.filterRetePersent(this.callTotalDay).minnisPercentageRate
            await this.getChart(this.filterRetePersent(this.callTotalDay).rate)
        },
        fiterDate(data1, data2, num) {
            if (Number(data2) === 0) {
                return '0.00'
            } else {
                return (Number(data1) * 100 /
                    Number(data2)).toFixed(num)
            }
        },
        // 获取进度条图片
        async getChart(rate) {
            this.chartRef = this.$echarts.init(document.getElementById('chartNoe'))
            var option = {
                title: {
                    show: true,
                    text: rate + "%",
                    x: "center",
                    y: "center",// 通过x,y将标题(进度)定位在圆环中心
                    textStyle: {
                        fontSize: this.$util.nowSizeWidth(16),
                        color: "#ffffff"
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{d}%",
                    show: false,
                },
                legend: {
                    orient: "vertical",
                    x: "left",
                    show: false,
                },
                series: {
                    name: "",
                    type: "pie",
                    radius: ['78%', '100%'], //图形大小

                    avoidLabelOverlap: true,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [
                        {
                            value: rate,
                            name: "",
                            itemStyle: {
                                color: "#F6C748",
                                borderRadius: 5, // 设置圆角半径
                            },
                        },
                        {
                            value: (100 - Number(rate)).toFixed(2),
                            name: "",
                            itemStyle: {
                                color: "#0A1F48",//透明色，也可以设置把其他颜色
                            },
                        },
                    ],
                },
            }
            this.chartRef.setOption(option, true)
        },
        filteredItems(arr) {
            if (Number(this.selectType) === 1) {
                return arr.filter(item => Number(item.callCount) > 0)
            } else if (Number(this.selectType) === 2) {
                return arr.filter(item => Number(item.successCount) > 0)
            } else if (Number(this.selectType) === 3) {
                return arr.filter(item => Number(item.shortSuccessCount) > 0)
            } else if (Number(this.selectType) === 4) {
                return arr.filter(item => Number(item.failCount) > 0)
            }
        },
        CloseDialog() {
            this.dialogFormVisible = false
        },
        CloseDialog2() {
            this.MouthSecondDialog = false
        },
        // 点击查看详情
        async handleEdit(item) {
            this.detailInfo.infodel = item
            this.drawerLoadding = true
            this.drawerVisible = true
            await this.getDevicePhoneData(item)
            await this.getStaticPhoneData(item)
            this.drawerLoadding = false
        },
        async getDevicePhoneData(item) {
            const params = {
                school: item.school,
                theDay: this.datevalue
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/queryOneSchoolPhoneCallDay', { params: params })
            this.detailInfo.deviceInfo = res.data
        },
        async getStaticPhoneData(item) {
            const params = {
                school: item.school,
                theDay: this.datevalue
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/phoneCallSchoolTotalDay', { params: params })
            this.schoolCallTotalDay = res.data
            this.schoolPercentageRate = this.filterRetePersent(this.schoolCallTotalDay).percentageRate
            this.schoolRate = Number(this.filterRetePersent(this.schoolCallTotalDay).rate)
            await this.$refs.drawerRef.getChart()
        },
        handleClose() {
            this.drawerVisible = false
        },
        filterRetePersent(data) {
            let obj = {
                rate: 0,
                percentageRate: 0,
                minnisPercentageRate: 0,
            }
            if (Number(this.selectType) === 1) {
                obj.rate = 100
                obj.percentageRate = this.percentage(data.theDayCall.callCount, data.preDayCall.callCount)
                // obj.minnisPercentageRate = this.percentage(data.theDayCall.callSecond, data.preDayCall.callSecond)
                obj.minnisPercentageRate = this.percentage(Math.ceil(Number(data.theDayCall.callSecond) / 60), Math.ceil(Number(data.preDayCall.callSecond) / 60))
            } else if (Number(this.selectType) === 2) {
                obj.rate = this.fiterDate(data.theDayCall.successCount, data.theDayCall.callCount, 1)
                obj.percentageRate = this.percentage(data.theDayCall.successCount, data.preDayCall.successCount)
                // obj.minnisPercentageRate = this.percentage(data.theDayCall.normalCallSecond, data.preDayCall.normalCallSecond)
                obj.minnisPercentageRate = this.percentage(Math.ceil(Number(data.theDayCall.normalCallSecond) / 60), Math.ceil(Number(data.preDayCall.normalCallSecond) / 60))
            } else if (Number(this.selectType) === 3) {
                obj.rate = this.fiterDate(data.theDayCall.shortSuccessCount, data.theDayCall.callCount, 1)
                obj.percentageRate = this.percentage(data.theDayCall.shortSuccessCount, data.preDayCall.shortSuccessCount)
                obj.minnisPercentageRate = this.percentage(Math.ceil(Number(data.theDayCall.shortCallSecond) / 60), Math.ceil(Number(data.preDayCall.shortCallSecond) / 60))
            } else if (Number(this.selectType) === 4) {
                obj.rate = this.fiterDate(data.theDayCall.failCount, data.theDayCall.callCount, 1)
                obj.percentageRate = this.percentage(data.theDayCall.failCount, data.preDayCall.failCount)
                obj.minnisPercentageRate = 0
            }
            return obj
        }
    },
}
</script>
<style lang="less" scoped>
.chartStaty {
    width: 100%;
    background: #0F2A5B;
    // height: 208px;
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;

    .topFlex {
        display: flex;
        align-items: center;

        div:first-of-type {
            margin-left: 5px;
            flex: 1;
            text-align: left;
            display: inline-flex;
            align-items: center;

            img {
                width: 20px;
                height: 20px;
                display: inline-block;
                margin: 0 15px;
            }

        }

        div:last-of-type {
            span {
                width: 90px;
            }
        }

        .btnBox {
            padding: 0 20px;
            height: 32px;
            line-height: 32px;
            background: linear-gradient(180deg, #02DFFA 0%, #1764F2 100%);
            font-size: 12px;
            cursor: pointer;
            margin-left: 10px;
            border-radius: 0px;
            border: none;
            color: #ffffff;
            box-sizing: border-box;
        }
    }

    .botFlex {
        display: flex;
        align-items: center;
        margin-top: 5px;

        #chartNoe {
            width: 76px;
            height: 76px;
            margin: 0 40px 0 20px;
        }

        .flexList {
            flex: 1;

            .itemFlex {
                width: 100%;
                display: flex;
                align-items: center;
                margin: 15px 0;

                .item {
                    flex: 1;
                    text-align: left;

                    div:first-of-type {
                        font-size: 12px;
                        color: #FFFFFF;
                        margin-bottom: 10px;
                    }

                    div:last-of-type {
                        font-weight: bold;
                        font-size: 18px;
                        color: #F6C748;
                        display: flex;
                        align-items: center;

                        span:last-of-type {
                            font-size: 12px;
                            font-weight: 400;
                            display: inline-block;
                            margin-left: 5px;
                        }

                        img {
                            display: inline-block;
                            margin-left: 15px;
                        }
                    }
                }

                .item:last-of-type {
                    flex: 1.3;
                }
            }
        }
    }
}
</style>
<style>
.el-tooltip__popper.is-light {
    background: rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.05) !important;
    border-radius: 3px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    border: none !important;
}

.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow {
    border-top-color: rgba(0, 0, 0, 0.9) !important;
}

.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after {
    border-top-color: rgba(0, 0, 0, 0.9) !important;
}

.el-date-table td.disabled div {
    background-color: transparent !important;
}

.el-date-picker__header-label {
    color: #ffffff;
}

.el-picker-panel .el-date-table td.current {
    background: rgba(44, 205, 255, 0.2) !important;
    color: #4BEEFF !important;
    border-radius: 50% !important;
}

.el-date-table td.current:not(.disabled) span {
    background: rgba(44, 205, 255, 0.2) !important;
}

.el-picker-panel .el-date-table td.today {
    background-color: transparent !important;
}
</style>